<template>
    <div>
        <!--列表-->
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-table :data="dict"  @row-dblclick="clickRow" v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="数据字典名"   >
            </el-table-column>
            <el-table-column prop="sn" label="编号"   >
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="totals" style="float:right;">
            </el-pagination>
        </el-col>

        <!--添加修改表单-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="字典名" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="字典编号">
                    <el-input v-model="form.sn" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>

        <!--抽屉添加修改表单-->
        <el-dialog :title="titlep" :visible.sync="dialogFormVisiblep">
            <el-form :model="pform">
                <el-form-item label="明细名" >
                    <el-input v-model="pform.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisiblep = false">取 消</el-button>
                <el-button type="primary" @click="addFormD">确 定</el-button>
            </div>
        </el-dialog>

        <!--row-dblclick	当某一行被双击时会触发该事件	row, column, event-->
        <!--抽屉样式-->
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false">
            <span>
                <el-button type="primary" @click="handleAddp">新增</el-button>
                <el-table :data="det"  v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column type="index" width="60">
                    </el-table-column>
                    <el-table-column prop="name" label="数据字典名"   >
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template scope="scope">
                            <el-button size="small" @click="handleEditp(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDelp(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                 </el-table>
                <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="phandleCurrentChange"  :page-size="pageSizes" :total="ptotals" style="float:right;">
            </el-pagination>
        </el-col>
            </span>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                //抽屉标题
                titlep:'',
                //抽屉模态框
                dialogFormVisiblep:false,
                //明细当前页
                pcurrentPage:1,
                //明细当前页总条数
                pageSizes:10,
                //明细总条数
                ptotals:0,
                //明细数据
                det:[],
                //抽屉默认关闭
                drawer: false,
                //列表数据展示
                dict:[],
                //加载框
                listLoading:false,
                //前面复选框
                sels:[],
                //每页条数
                pageSize:10,
                //总条数
                totals:0,
                //当前页
                currentPage:1,
                //标题
                title:'',
                //添加修改框默认关闭
                dialogFormVisible:false,
                //表单内容
                form:{
                    id:'',
                    name:'',
                    sn:'',
                },
                pform:{
                    id:'',
                    name:'',
                    types_id:'',
                },
                rowrid:0,
            }
        },methods:{
            //抽屉删除
            handleDelp(index,row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(()=>{
                    this.delFormp(row);
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }).catch(()=>{
                    this.$message({
                        message: '已经取消',
                    });
                })
            },
            //抽屉新增
            handleAddp(){
                this.pform["id"] = '',
                this.pform["name"] = '',
            //弹出抽屉模态框
                this.dialogFormVisiblep = true;
            },
            //抽屉添加
            addFormD(){
                console.debug(this.pform);
                this.$http.put("/dictionaryDetail",this.pform).then(res=>{
                    this.dialogFormVisiblep = false;
                    this.findDet();
                })
            },
            //发送查询所有信息
            loadAll(){
                //准备分页数据
                let param = {
                    pageSize:this.pigeSize,
                    currentPage:this.currentPage,
                }
                this.$http.post("/dictionaryType",param).then(res=>{
                    //console.debug(res.data.totals);
                    //给表单中的数据赋值
                    this.dict = res.data.data;
                    this.totals = res.data.totals;

                })
            },
            //
            selsChange(){

            },
            //批量移除
            batchRemove(){

            },
            //改变当前页触发
            handleCurrentChange(val){
                //console.debug(val)
                this.currentPage = val;
                this.loadAll();
            },
            //新增触发
            handleAdd(row){
                //先情况表单缓存
                for(var k in this.form){
                    this.form[k] = '';
                }
                //点击添加弹出
                this.dialogFormVisible = true;
                this.title="添加数据字典";
            },
            //发送添加/修改请求
            saveForm(){
                this.$http.put("/dictionaryType",this.form).then(res=>{
                })
            },
            //表单点击确定
            addForm(){
                //发送添加修改请求
                this.saveForm();
                //关闭添加修改框
                this.dialogFormVisible = false;
                //重新查询发送数据
                this.loadAll();
            },
            //编辑触发
            handleEdit(index,row){
                //回显数据
                for(var k in this.form){
                    this.form[k] = row[k];
                }
                //弹出框
                this.dialogFormVisible = true;
                //修改标题
                this.title = "修改数据字典";
            },
            //抽屉编辑触发
            handleEditp(index,row){
                //回显数据
                for(var k in this.pform){
                    this.pform[k] = row[k];
                }
                //弹出框
                this.dialogFormVisiblep = true;

            },
            //删除触发
            handleDel(index,row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(()=>{
                    this.delForm(row);
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }).catch(()=>{
                    this.$message({
                        message: '已经取消',
                    });
                })
            },
            //发送删除请求
            delForm(row){
                this.$http.delete("/dictionaryType/"+row.id).then(res=>{
                    let{success,message} = res.data;
                    if(success){
                        this.loadAll();
                    }
                })
            },
            delFormp(row){
                this.$http.delete("/dictionaryDetail/"+row.id).then(res=>{
                    let{success,message} = res.data;
                    if(success){
                        this.findDet();
                    }
                })
            },
            //双击事件
            clickRow(row,column,event){
                this.rowrid = row.id
                //row是数据，使用row.id获取id
                //弹出抽屉
                this.drawer = true;
                this.findDet();
                this.pform.types_id = row.id;
            },
            //查询明细数据
            findDet(){
                let param = {
                    typeId:this.rowrid,
                    pageSize:this.pageSizes,
                    currentPage:this.pcurrentPage,
                }
                this.$http.post("/dictionaryDetail",param).then(res=>{
                    //console.debug(res)
                    this.det = res.data.data;
                    this.ptotals = res.data.totals;
                })
            },
            //改变明细当前页
            phandleCurrentChange(val){
               this.pcurrentPage = val;
               this.findDet();
            }
        },mounted(){
          //钩子方法，页面加载完执行
            this.loadAll();
        }
    }
</script>